<!--  -->
<template>
  <div class="content">
    <saixuan></saixuan>
    <div class="lb-wrap">
      <!-- 上面标题部分开始 -->
      <div class="lb-title">
        <slot name="left">
          <div class="lb-title-left">
            <img src="../assets/h1.png" alt />
            <span>{{n.head}}</span>
          </div>
        </slot>
        <slot name="right">
          <div class="lb-title-right">
            <el-button
              style="
             width: 103px;height:32px;border:1px solid #a760f6;
             "
              type="primary"
            >
              <img src="../assets/btnimg1.png" class="el-icon-circle-plus-outline" alt />
              <router-link id="router-span1" :to="n.path" tag="span">{{n.name}}</router-link>
            </el-button>
            <el-button
              style="
             width: 103px;height:32px;border:1px solid #a760f6;
             "
              type="primary"
            >
              <img src="../assets/btnimg2.png" class="el-icon-delete" alt />
              <router-link id="router-span2" to="/Home" tag="span">回收站</router-link>
            </el-button>
          </div>
        </slot>
      </div>
      <!-- 上面标题部分结束 -->
      <!-- 总内容的开始 -->
      <div class="lb-content">
        <div class="lb-content-head">
          <div style="width:80px;height:60px;"></div>
          <div style="width:100px;height:60px;">编号</div>
          <div style="width:140px;height:60px;">课程名称</div>
          <div style="width:152px;height:60px;">列表图</div>
          <div style="width:80px;height:60px;">课程上架</div>
          <div style="width:80px;height:60px;">报名费(元)</div>
          <div style="width:80px;height:60px;">销量</div>
          <div style="width:80px;height:60px;">上传人</div>
          <div style="width:106px;height:60px;">上传时间</div>
          <div style="width:144px;height:60px;">操作</div>
        </div>
        <div class="lb-content-body">
          <div class="lb-content-body-item" v-for="(item,index) in listcont1" :key="item.id">
            <div class="lb-content-body-item-con" v-for="item2 in item.child" :key="item2.id2">
              <div style="width:80px;height:90px;" class="lb-content-body-item1">
                <input @click="danClick(index)" :checked="item2.dan_is_select" type="checkbox" />
              </div>
              <div style="width:100px;height:90px;" class="lb-content-body-item2">
                <span>{{item2.bianhao}}</span>
              </div>
              <div style="width:140px;height:90px;" class="lb-content-body-item3">
                <span>{{item2.kcname}}</span>
              </div>
              <div style="width:152px;height:90px;" class="lb-content-body-item4">
                <img style="width:97px;height:54px;" src="../assets/kcimg.png" alt />
              </div>
              <div style="width:80px;height:90px;color: #f40000;" class="lb-content-body-item5">
                <span>{{item2.kcsj}}</span>
              </div>
              <div style="width:80px;height:90px;" class="lb-content-body-item6">
                <span>{{item2.money}}</span>
              </div>
              <div style="width:80px;height:90px;" class="lb-content-body-item7">
                <span>{{item2.xiaoliang}}</span>
              </div>
              <div style="width:80px;height:90px;" class="lb-content-body-item8">
                <span>{{item2.renchuanren}}</span>
              </div>
              <div style="width:106px;height:90px;" class="lb-content-body-item9">
                <span>{{item2.shangchuantime}}</span>
              </div>
              <div
                style="width:144px;height:90px;position:relative;color:#9137f3;"
                class="lb-content-body-item10"
              >
                <router-link tag="b" to="/xzkc">编辑</router-link>
                <el-button :plain="true" @click="open2">加入回收站</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="fenye">
          <div class="fenye-left">
            <input type="checkbox" @click="quanClick" :checked="quan_is_select"><span style="color:#333">全选</span>
            <span style="color:#999">批量加入回收站</span>
          </div>
          <template>
            <div class="block">
              <el-pagination :background="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="100"
              ></el-pagination>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
       

<script>
import saixuan from "../components/saixuan1";
export default {
  components: {
    saixuan,
  },
  props: {
    list: {
      type: Array,
    },
    n: {
      type: Object,
    },
    listcont1: {
      type: Array,
    },
  },
   methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      open2(){
        console.log()
        this.$message({
          showClose: true,
          message: '加入回收站成功！',
           type: 'success'
        });
      },
      quanClick(){
        this.quan_is_select = !this.quan_is_select
        this.listcont1.forEach(item=>{
          item.child.forEach(item2=>{
              // item2.dan_is_select = this.quan_is_select
             item2.dan_is_select =  this.quan_is_select
              
          })
        })
        for (let item1 of this.listcont1){
            for(let item2 of item1.child){
              console.log(item2.dan_is_select)
            }
        }
         console.log(this.quan_is_select)
      },
      danClick(index){
        this.listcont1[index].child[0].dan_is_select = !this.listcont1[index].child[0].dan_is_select
        
        let bool = this.listcont1.every(item=>{
           return  item.child[0].dan_is_select==true
        })
         if(bool){
          this.quan_is_select = bool
        }else{
           this.quan_is_select = bool
        }
      
      }
    },
    data() {
      return {
        quan_is_select:false,
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,

      };
    }
};
</script>
<style>
.lb-wrap {
  margin: 0 auto;
  width: 1100px;
  height: 1174px;
  border: 1px solid #eeeeee;
  margin-top: 10px;
  padding: 0 20px;
}
.lb-title {
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lb-title-left {
  display: flex;
  position: relative;
  padding-top: 16px;
}
.lb-title-left img {
  display: block;
  width: 17px;
  height: 14px;
}
.lb-title-left span {
  font-size: 14px;
  color: #666;
  position: relative;
  left: 4px;
  top: -3px;
}

.lb-title-right .el-button {
  position: relative;
  background: #fff;
}

.lb-title-right {
  padding-top: 12px;
}
#router-span1 {
  font-size: 12px;
  position: absolute;
  right: 12px;
  top: 10px;
  color: #a760f6;
}
.el-icon-circle-plus-outline {
  position: absolute;
  left: 14px;
  top: 7px;
}
#router-span2 {
  font-size: 12px;
  position: absolute;
  right: 18px;
  top: 10px;
  color: #a760f6;
}
.el-icon-delete {
  position: absolute;
  left: 16px;
  top: 7px;
}
/* 内容的开始 */
.lb-content {
  width: 100%;
}
.lb-content-head {
  width: 1058px;
  height: 60px;
  background-color: #9137f3;
  display: flex;
  justify-content: space-around;
  align-items: center;
  line-height: 60px;
  color: #fff;
  font-size: 14px;
  font-family: "思源黑体 Bold", "思源黑体 Regular", "思源黑体";
  font-weight: 700;
  font-style: normal;
}
.lb-content-head div {
  line-height: 60px;
  text-align: center;
}
/* 每行内容 */
.lb-content-body-item {
  width: 100%;
  height: 90px;
  border-bottom: 1px solid #ccc;
}
.lb-content-body-item-con {
  height: 90px;
  line-height: 90px;
  display: flex;
  justify-content: space-between;
}
.lb-content-body-item-con div {
  text-align: center;
  font-size: 12px;
  color: #333;
}
.lb-content-body-item4 {
  box-sizing: border-box;
  padding-top: 18px;
}
.lb-content-body-item10 b {
  cursor: pointer;
}
.lb-content-body-item10 b:hover {
  text-decoration: underline;
}

.el-button{
  border: none;
  font-size: 12px;
  color: #9137f3;
  font-weight: 700;
}
.el-button:hover{
  text-decoration: underline;
}
/* 分页 */
.fenye{
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.fenye-left{
  font-size: 14px;
}
.fenye-left input{
  margin-right: 3px;
}
.fenye-left span{
  margin:0 4px;
}
.el-pagination{
  position: relative;
  bottom: -5px;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #9137f3;
    color: #FFF;
}

.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
    margin: 0 5px;
    background-color: #fff;
    border: 1px solid #9137f3;
    color: #9137f3;
    min-width: 30px;
    border-radius: 4px;
}

</style>